<!-- 补单开单作业：蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :OriginalFilter="{ static: true }" :formList="formList2" @findClicked="findClicked2" />
    <div class="flex mt10" style="width: 100%">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">开发补单</h1>
        <Table
          :TableHeight="50"
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }"></el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
    <div class="flex"">
      <div>
        <h1 class="f16">补单明细查询</h1>
        <Table
          :TableHeight="50"
          :tableHeader="tableHeader2"
          :tableData="tableData2"
          selection
          class="mt10"
          :isLoading="isLoading2"
          @currentRow="currentRow2"
        />
      </div>
      <div>
        <h1 class="f16">补单明细查询-dutyList</h1>
        <JTable
          :TableHeight="50"
          :tableHeader="tableHeader3"
          :tableData="tableData3"
          selection
          class="mt10"
          :isLoading="isLoading3"
          @currentRow="currentRow3"
        />
      </div>
    </div>

    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right;cursor: pointer;color: rgb(7, 7, 7);">X</span>
      <div class="flex AIC" style="flex-direction: column;">
        <Find :searchImg="false" :formList="formList10" @findClicked="findClicked10" />
        <div class="flex mt10 JCC" style="width: 100%; background-color: white;">
            <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
              <h1 class="f16">选择外发指令</h1>
              <Table :tableHeader="tableHeader10" :tableData="tableData10" selection class="mt10" :outTableHeight="150"
                @selectList="selectTableList10" @currentRow="currentRow10" />
            </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup name="JReplenishmentOperation">
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { watch } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '大类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'checkbox',
    checkboxLabel: '已转审核',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '未转审核',
    checked: false
  },
  {
    type: 'date',
    dateLabel: '日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'button',
    checkboxLabel: '转审核'
  },
  {
    type: 'button',
    checkboxLabel: '整单删除'
  },
  {
    type: 'button',
    checkboxLabel: '当前行开补所需数据查询'
  }
])
const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入开补单位',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入开补类型',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入开补原因',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '开补单'
  }
])
// 表一模块
// 表一按钮
const findClicked = async(content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '转审核') {
    const res = await service.post<any, any>(`/mes/dev/supp/cfm?suppId=${currentTableRow.value.id}`)
    if (res.code === 200) {
      JMessage.success('转审核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '整单删除') {
    const res = await service.post<any, any>(`/mes/dev/supp/clean?suppId=${currentTableRow.value.id}`)
    if (res.code === 200) {
      JMessage.success('整单删除成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '当前行开补所需数据查询') {
    drawer.value = true
    getTableList10()
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 表格计算函数
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '已转审核')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '未转审核')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return 'N'
  } else if (Audited.checked) {
    return 'Y'
  } else {
    JMessage.warning('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const tableHeader = ref([
  {
    label: '补单号',
    prop: 'suppOrderNo'
  },
  {
    label: '开补类型',
    prop: 'suppType'
  },
  {
    label: '开补单位',
    prop: 'suppDept'
  },
  {
    label: '打印标志位',
    prop: 'printFlag'
  },
  {
    label: '转审核时间',
    prop: 'cfmDate'
  },
  {
    label: '转审核发起人',
    prop: 'cfmBy'
  },
  {
    label: '转审核标志位',
    prop: 'cfmFlag'
  },
  {
    label: '生控检核时间',
    prop: 'skCheckDate'
  },
  {
    label: '生控检核人',
    prop: 'skCheckBy'
  },
  {
    label: '生控检核标志位',
    prop: 'skCheckFlag'
  },
  {
    label: '开补部门',
    prop: 'deptNo'
  }
])
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/mes/dev/supp/head/list', {
    brand: formList.value.find((item: any) => item.selectP === '品牌')?.selectValue,
    color: formList.value.find((item: any) => item.inputPlaceholder === '请输入颜色')?.inputValue,
    deliveryEndDate: formList.value.find((item: any) => item.dateLabel === '交期')?.dateValue?.[1],
    deliveryStartDate: formList.value.find((item: any) => item.dateLabel === '交期')?.dateValue?.[0],
    lotNo: formList.value.find((item: any) => item.inputPlaceholder === '请输入指令')?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    shortStatus: cfmFlag() //	有无欠数(Y/N)	string	body	true
  })
  isLoading.value = false
  tableData.value = tableDataList.data.records
  total.value = tableDataList.data.total
  currentRow()
  //   summaryData.value[0].num = tableDataList.sum[0].orderCount
  //   summaryData.value[1].num = tableDataList.sum[0].surplusCount
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
  getTableList2()
}

// 表二模块
const tableData2 = ref([])
const isLoading2 = ref(true)
const currentTableRow2 = ref({}) as any
const currentRow2 = async (row: any = tableData2.value[0]) => {
  currentTableRow2.value = row
  getTableList3(row)
}
const tableHeader2 = ref([
  {
    label: '材料颜色',
    prop: 'color'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '材料编码',
    prop: 'mtlNo'
  },
  {
    label: '材料规格',
    prop: 'mtlSpec'
  },
  {
    label: '材料单位',
    prop: 'mtlUnit'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
const getTableList2 = debounce(async () => {
  // 获取表二数据
  isLoading2.value = true
  let tableDataList = await service.post<any, any>(`/mes/dev/supp/detail/list?suppOrderNo=${currentTableRow.value.suppOrderNo}`)
  isLoading2.value = false
  tableData2.value = tableDataList.data.map((item: any) => {
    for (const key in item.mtl) {
      item[key] = item.mtl[key]
    }
    return item
  })
  currentRow2()
  // tableData3.value = tableDataList.data[0].dutyList
}, 500)

const tableHeader3 = ref([
  {
    label: '责任数量/责任占比',
    prop: ''
  }
  // {
  //   label: '备注',
  //   prop: 'remark'
  // }
])
const tableData3 = ref([])
const isLoading3 = ref(true)
const getTableList3 = debounce(async (row: any) => {
  tableHeader3.value.splice(1, tableHeader3.value.length - 1)
  isLoading3.value = true
  let getStytiTableHeader = await service.post<any, any>(`/mes/dev/supp/detail/duty/list?suppOrderNo=${currentTableRow.value.suppOrderNo}`)
  tableHeader3.value.push(...getStytiTableHeader.data.map((item: any) => ({ label: item, prop: item })))
  tableData3.value = row.dutyList.map((item: any) => {
    item[item.dutyNo] = item.dutyQty
    return item
  })
  isLoading3.value = false
}, 500)
const currentTableRow3 = ref({}) as any
const currentRow3 = async (row: any = tableData3.value[0]) => {
  currentTableRow3.value = row
}

const tableHeader4 = ref([
  {
    label: '材料颜色',
    prop: 'color'
  },

  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '材料编码',
    prop: 'mtlNo'
  },
  {
    label: '材料规格',
    prop: 'mtlSpec'
  },
  {
    label: '材料单位',
    prop: 'mtlUnit'
  }
])
const tableData4 = ref([])
const isLoading4 = ref(true)
const currentTableRow4 = ref({}) as any
const currentRow4 = async (row: any = tableData4.value[0]) => {
  currentTableRow4.value = row
}


const drawer = ref(false)
const formList10 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入开补原因',
    inputValue: '',
    inputLabel: ''
  },{
    type: 'input',
    inputPlaceholder: '请输入开补类型',
    inputValue: '',
    inputLabel: ''
  },{
    type: 'input',
    inputPlaceholder: '请输入开补部门',
    inputValue: '',
    inputLabel: ''
  },{
    type: 'input',
    inputPlaceholder: '请输入开补数量',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '开补单'
  }
  // {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '开补类型',
  //   selectLabel: '',
  //   selectOptions: []
  // },
  // {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '开补部门',
  //   selectLabel: '',
  //   selectOptions: []
  // }
])
const tableHeader10 = ref([
  {
    label: '补单号',
    prop: 'suppOrderNo'
  }
])
const tableData10 = ref([])
const findClicked10 = async (content: string) => {
  if (content === '开补单') {
    const res = await service.post<any, any>(`/mes/dev/supp/create`, {
      "id": "",
      "mtlList": [
        {
          "id": "",
          "mtlId": "",
          "qty": 0,
          "remark": "",
          "suppId": ""
        }
      ],
      "orderId": currentTableRow.value.id,
      "qty": formList10.value.find((item: any) => item.inputPlaceholder === '请输入开补数量')?.inputValue,
      "suppDept": formList10.value.find((item: any) => item.inputPlaceholder === '请输入开补部门')?.inputValue,
      "suppReason": formList10.value.find((item: any) => item.inputPlaceholder === '请输入开补原因')?.inputValue,
      "suppType": formList10.value.find((item: any) => item.inputPlaceholder === '请输入开补类型')?.inputValue
    })
    if (res.code === 200) {
      JMessage.success('开补单成功')  
      getTableList10()
    } else {
      JMessage.error(res.message)
    }
  }
}
const currentTableRow10 = ref({}) as any
const currentRow10 = async (row: any = tableData10.value[0]) => {
  currentTableRow10.value = row
}

const isLoading10 = ref(true)
const getTableList10 = debounce(async () => {
  isLoading10.value = true
  let tableDataList = await service.post<any, any>(`/mes/dev/supp/creat/list?orderId=${currentTableRow.value.id}`)
  isLoading10.value = false
  tableData10.value = tableDataList.data
  currentRow10()
}, 500)
</script>
